ラジオボタンでプルダウンメニューを変更する
今回は、ラジオボタンでカテゴリを選択すると、それに応じてプルダウンメニューの内容を変化させるテクニックを紹介します。プルダウンメニューを利用したリンクなどに活用してみると面白いでしょう。 サンプルページ

→ フォーム部分のHTMLを作成する
 
まずは、フォーム部分をHTMLで作成します。今回は、FORMタグに「f1」という名前を付け、2つのラジオボタン、およびプルダウンメニュー、ボタンを作成しました。ラジオボタンには、それぞれを選択した際に呼び出す関数「Infoseek()」「Rakuten()」をonClickイベントで指定します。
また、ボタンをクリックした際にリンク先へ移動する関数「goLink()」もonClickイベントで指定します。そのほか、プルダウンメニューにname属性で名前を付けておくのを忘れないでください。今回は、プルダウンメニューに「links」という名前を付けました。
<FORM name="f1">
<INPUT type="radio" name="cate" onClick="Infoseek()">各種情報<BR>
<INPUT type="radio" name="cate" onClick="Rakuten()">買い物<BR>
<BR>
<SELECT name="links">
<OPTION>ラジオボタンを選択</OPTION>
</SELECT>
<INPUT type="button" value="リンク先を表示" onClick="goLink()">
</FORM>
 


→ プルダウンメニューの内容を変更する関数の作成
 
続いて、JavaScriptで関数を作成します。まずは、ラジオボタンが選択された際の関数「Infoseek()」と「Rakuten()」を作成します。各関数では、最初に「document.f1.links.length」で表示する項目数を指定します。その後、「document.f1.links.options[i].text」でプルダウンメニューに表示する文字、「document.f1.links.options[i].value」で各項目の値を指定していきます。このとき、添字「i」の値が0から始めることに注意してください。このため、「i」の最大値は(項目数-1)となります。
<SCRIPT language="JavaScript">
<!--
function Infoseek(){
document.f1.links.length=4;
document.f1.links.options[0].text="Infoseek検索";
document.f1.links.options[1].text="Infoseekニュース";
document.f1.links.options[2].text="Infoseek天気";
document.f1.links.options[3].text="InfoseekTV番組表";
document.f1.links.options[0].value="http://www.infoseek.co.jp/";
document.f1.links.options[1].value="http://news.www.infoseek.co.jp/";
document.f1.links.options[2].value="http://tenki.www.infoseek.co.jp/";
document.f1.links.options[3].value="http://tv.www.infoseek.co.jp/";
}
function Rakuten(){
document.f1.links.length=3;
document.f1.links.options[0].text="楽天";
document.f1.links.options[1].text="楽天フリマ";
document.f1.links.options[2].text="楽天ブックス";
document.f1.links.options[0].value="http://www.rakuten.co.jp/";
document.f1.links.options[1].value="http://furima.rakuten.co.jp/";
document.f1.links.options[2].value="http://books.rakuten.co.jp/";
}
// -->
</SCRIPT>
 


→ 選択したリンク先を新しいウィンドウに表示
 
最後に、「リンク先を表示」ボタンをクリックした際に実行される関数「goLink()」を作成します。この関数では、プルダウンメニューで選択されている項目を探し出し、その値(URL)を新しいウィンドウで開きます。選択されている項目は、「document.f1.links.selectedIndex」の値で確認できます。そして、この項目の値をURLとしてwindow.open()を実行すると、選択したリンク先を新しいウィンドウで表示できます。
<SCRIPT language="JavaScript">
<!--
function Infoseek(){
document.f1.links.length=4;
document.f1.links.options[0].text="Infoseek検索";
document.f1.links.options[1].text="Infoseekニュース";
document.f1.links.options[2].text="Infoseek天気";
document.f1.links.options[3].text="InfoseekTV番組表";
document.f1.links.options[0].value="http://www.infoseek.co.jp/";
document.f1.links.options[1].value="http://news.www.infoseek.co.jp/";
document.f1.links.options[2].value="http://tenki.www.infoseek.co.jp/";
document.f1.links.options[3].value="http://tv.www.infoseek.co.jp/";
}
function Rakuten(){
document.f1.links.length=3;
document.f1.links.options[0].text="楽天";
document.f1.links.options[1].text="楽天フリマ";
document.f1.links.options[2].text="楽天ブックス";
document.f1.links.options[0].value="http://www.rakuten.co.jp/";
document.f1.links.options[1].value="http://furima.rakuten.co.jp/";
document.f1.links.options[2].value="http://books.rakuten.co.jp/";
}
function goLink(){
imax=document.f1.links.length-1;
for (i=0 ; i<=imax ; i++){
if (document.f1.links.selectedIndex==i){
window.open(document.f1.links.options[i].value);
}
}
}
// -->
</SCRIPT>
サンプルページ


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze